<template>
<div>
  <el-card shadow="always">
    <div class="coll_title">供应价查询</div>
    <div>
      <el-select
          v-model="valueId"
          placeholder="全部"
          style="width: 240px"
      >
        <el-option
            v-for="item in vuex.hotelList.value"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
      <el-button @click="select_list" class="mag_l-20" type="primary">查询</el-button>
      <el-button @click="resultvalue" class="mag_l-20" type="primary">重置</el-button>
    </div>
    <div>
      <el-button @click="add_button" class="mag_t-20" type="primary">新增</el-button>
    </div>
    <div class="mag_20_0">
      <el-table :data="list" :border="true">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="title" label="餐厅名称" />
        <el-table-column prop="goods_name" label="产品名称" />
        <el-table-column prop="addmoney" label="进价" />
        <el-table-column prop="age" label="价格" />
        <el-table-column prop="profit_age" label="利润" />
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" @click="addData(scope.row,'预览')">查看</el-button>
            <el-button type="primary" @click="addData(scope.row,'编辑')">编辑</el-button>
            <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定删除产品吗?"
                @confirm="deleteData(scope.row.id)"
            >
              <!--                @cancel="cancelEvent"-->
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class=" demo-pagination-block pad_t_20">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :page-sizes="[10, 20, 30, 40, 100]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <el-dialog v-model="visible" :show-close="false" width="1100px">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div class="wh_f">
          <div class="flex_1"><h4 :id="titleId" :class="titleClass">{{ title }}</h4></div>
          <div><el-button type="danger" @click="close">X</el-button></div>
        </div>
      </div>
    </template>
    <div>
      <div class="wh_f">
        <div class="flex_3">
          <titleText title="产品分类"></titleText>
          <div>
            <el-form :model="form" label-width="auto">
              <el-form-item label="饭店 :">
                <el-select :disabled="isLook" v-model="form.hotel_id" placeholder="请选择饭店">
                  <el-option
                      v-for="item in vuex.hotelList.value"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="产品分类 :">
                <div class="ccgl">
                  <selectDiv :disabled="isLook" @selectDiv="selecFunction" title="产品分类" :data="vuex.shopClsssList.value"></selectDiv>
                </div>
              </el-form-item>
              <el-form-item label="产品 :">
                <el-radio-group :disabled="isLook" v-model="form.goods_id">
                  <el-radio @click="addradio(item)" v-for="item in vuex.shopList.value" :value="item.id">{{ item.name }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="进价 :">
                <el-input :disabled="isLook" v-model="form.addmoney" />
              </el-form-item>
              <el-form-item label="价格 :">
                <el-input :disabled="isLook" v-model="form.age" />
              </el-form-item>
              <el-form-item label="利润 :">
                <el-input :disabled="isLook" v-model="form.profit_age" />
              </el-form-item>
            </el-form>
            <div class="wz_rigdq">
              <el-button :disabled="isLook" @click="pushData" type="primary" size="large">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</div>
</template>
<script setup lang="ts">
// 引用状态存储
import { storeVuex } from "@/store/modules/user";
import {storeToRefs} from "pinia";
const vuex = storeToRefs(storeVuex())
import {onMounted, reactive, ref} from "vue";
import {hotel, shop_type} from "@/api";
import {ElMessage} from "element-plus";

let visible = ref(false) //弹窗开关
let title = ref()             //弹窗标题
let valueId = ref()           //饭店id
let list = ref()              //饭店列表
let isLook = ref(false)
//分页初始值
let page = ref(1)
let limit = ref(10)
let count = ref()

let form:any = reactive({})
/*页面初始化执行*/
onMounted(() => {
  gethotel_list();
})


const add_button = ()=>{
  title.value = '新增'
  visible.value = true
  Object.keys(form).forEach(key =>{
    // @ts-ignore
    form[key] = ''
  })
}

//查询供应商价格列表
const gethotel_list = async()=>{
  const res = await hotel.getHotelList({
    shop_id:vuex.userType_id.value,
    page: page.value,
    limit: limit.value,
    hotel_id:valueId.value
  });
  list.value = res.data.data.data;
  count.value = res.data.data.count;
}
// 查看和编辑按钮
const addData = (e:any,tit:String)=>{
  if(tit == '预览'){
    isLook.value = true
  }else{
    isLook.value = false
  }
  form.id = e.id
  form.hotel_id = e.hotel_id
  form.goods_id = e.goods_id
  form.addmoney = e.addmoney
  form.age = e.age
  form.profit_age = e.profit_age
  visible.value = true
  title.value = tit

}
// 添加记录
const pushData = async ()=>{
  let res = reactive({});
  switch (title.value){
    case "新增":
      res = await hotel.addHotel({
        hotel_id:form.hotel_id,
        goods_id:form.goods_id,
        addmoney:form.addmoney,
        age:form.age,
        profit_age:form.profit_age,
        shop_id:vuex.userType_id.value
      })
          break;
    case "编辑":
      res = await hotel.updaHotel({
        id:form.id,
        hotel_id:form.hotel_id,
        goods_id:form.goods_id,
        addmoney:form.addmoney,
        age:form.age,
        profit_age:form.profit_age,
        shop_id:vuex.userType_id.value
      })
          break;
  }
  ElMessage({
    // @ts-ignore
    message: res.data.msg,
      type: res.data.status==1?'success':'error'
  })
  gethotel_list();

  visible.value = false
}
const select_list = ()=>{
  gethotel_list()
}
const resultvalue = ()=>{
  valueId.value = null
}
//删除饭店清单
const deleteData = async (e:any)=>{
  const res: any = await hotel.deleteHotelList({
    id:e,
  })
  ElMessage({
    message: res.data.msg,
      type: res.data.status==1?'success':'error'
  })
  gethotel_list();
}
//获取产品分类
const getShop_type = async (e:any)=> {
  const res: any = await shop_type.getShop_type({
    shop_id: vuex.userType_id.value,
    type: e,
    is_show:1
  })
  vuex.shopList.value = res.data.data.data
}
//滑块选择器值的回调函数
const selecFunction = (title:any,id:any)=>{
  switch (title){
    case "产品分类":
      getShop_type(id)
      break;
  }
}
//点击了产品 此时应该去查询进价 计算利润
const addradio = (e:any)=>{
  form.addmoney = e.addmoney
  form.age = e.age
  form.profit_age = e.age - e.addmoney
}
// 分页
const handleSizeChange = async ()=>{
  gethotel_list();
}
const handleCurrentChange = async ()=>{
  gethotel_list();
}
</script>
<style scoped>

</style>
